<template>
	<div :class="{ leftMenu: true, width: show }">
		<el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
			background-color="#d3e3fd" text-color="#007acc" active-text-color="#007acc" unique-opened="true"
			:collapse="show">
			<el-menu-item index="1" @click="enterSfzyAction">
				<i class="el-icon-house"></i>
				<span slot="title">十方智育</span>
			</el-menu-item>
			<!-- v k i 分别是值、键、下标 -->
			<el-submenu v-for="(v, k, i) in menuObj" :index=i :key="k">
				<template slot="title">
					<i class="el-icon-star-off"></i>
					<span slot="title">{{ k }}</span>
				</template>
				<el-menu-item-group>
					<el-menu-item v-for="(value, j) in v" :key="j" @click="showComponent(value, k)">{{ value
                        }}</el-menu-item>
				</el-menu-item-group>
			</el-submenu>

		</el-menu>
	</div>
</template>
<script>
	export default {
		name: "LeftMenuView",
		data() {
			return {
				table: {
					firstTable: " ",
					secondTable: " ",
				},
				firstTable: " ",


            // 键是一级标题 值=数组 是二级标题
            menuObj: {
                咨询预约: ["咨询问题管理","咨询回复管理","咨询师等级管理","擅长领域管理","证书管理"],         
                用户评价管理:["用户评价管理","收费标准管理"],
                心理测评管理: ["心理测评信息管理","心理测评"],
                管理员管理: ["用户管理", "咨询师管理", "公司信息管理"],
                心理知识管理: ["心理知识", "查询__心理专家", "查询__心理文章", "查询__提问回答", "查询__心理测试"],
                心理答疑管理: ["心理答疑主题"],
                公益中心管理: ["公益中心",],
                精选文章管理: ["精选文章管理"],
                课程管理: ["课程管理"],
                咨询预约1: ["咨询预约管理"],

            },
            // 点击二级标题切换组件 将二级标题作为键值对的键名
            // 点击二级标题 查找对应的路由路径
            routerObj: {
                用户管理: "/admin/user",
                公司信息管理:"/admin/componey",
                课程管理:"/course/course",
                用户评价管理:"/usermark/usermark",
                收费标准管理:"/charge/charge",
                咨询问题管理:"/consultProblem/consultProblem",
                咨询回复管理:"/consultreply/consultreply",
                咨询师等级管理:"/teacherlevel/teacherlevel",
                擅长领域管理:"/articletype/articletype",
                证书管理:"/book/book",
                精选文章管理:"/article/choiceArticle",
                心理测评信息管理:"/psychometricTesting/psychometricTesting",
                心理测评:"/test/test",
                心理知识:"/psychologyKnowledge/PsychologyKnowledge",
                查询__心理专家:"/psychologyKnowledge/SearchHeartExpect",
                查询__心理文章:"/psychologyKnowledge/SearchHeartEssay",
                查询__提问回答:"/psychologyKnowledge/QuestionsReply",
                查询__心理测试:"/psychologyKnowledge/SearchHeartTest",
                心理答疑主题: "/sspsychologicalTopic/topic",
                咨询预约管理: "/consult/consult",
                公益中心: "/free",
                咨询师管理: "/admin/consultants"


				},
			}
		},
		props: ["show"],
		methods: {
			handleOpen(value) {
				console.log(value);
			},
			handleClose(value) {
				console.log(value);
			},
			enterSfzyAction() {
				this.$router.push("/sfzy").catch(() => {});
				this.table.firstTable = '十方之域';
				this.table.secondTable = ' ';
				this.$emit("tableChange", this.table)
			},
			// 点击二级标题事件 将标题作为键 取出对应的路由 切换组件
			showComponent(key, k) {
				let path = this.routerObj[key];
				console.log(key);
				console.log(k);
				this.table.firstTable = k;
				this.table.secondTable = key
				this.$router.push(path).catch(() => {})
				console.log(this.table)
				this.$emit("tableChange", this.table)


			}
		}
	}

</script>

<style scoped>
	.width {
		width: 65px !important;
	}

	.leftMenu {
		width: 230px;
		/* 1vh=设备高度的1% 将当前设备的高度分100份一份就是1vh */
		height: 100vh;
		background-color: #d3e3fd;
		position: fixed;
		left: 0;
		top: 0;
		box-sizing: border-box;
		/* 盒模型总宽度210px */
		transition: width .5s;
	}

	/* 媒介查询 就是检测浏览器宽高的变化 做出页面布局调整 */
	@media only screen and (max-width:1000px) {

		/* 页面宽度在1000以内 才会执行此处代码 */
		/* max-width:1000px 最大能监听到1000px的宽度 */
		.leftMenu {
			visibility: hidden;
		}
	}

	.el-menu-vertical-demo {
		border-right: 0;
	}
</style>